<template>
  <div class="intelligent-analysis-container">
    <el-form :inline="true" :model="formInline" border class="demo-form-inline">
      <el-form-item label="摄像头名称:">
        <VideoFormTree
          v-model="formInline.cameraId"
          ref="videoTree"
          defaultTab="1"
          :set-default-value="false"
          show-checkbox
        ></VideoFormTree>
      </el-form-item>
      <el-form-item label="时间:">
        <el-date-picker
          v-model="formInline.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="handleTime"
        />
      </el-form-item>
      <el-form-item label="告警类型:">
        <!-- <AllSelect
          :value.sync="formInline.alarmTypeCode"
          :options="kindList"
          :select-options="selectOptionsKind"
          width="270"
          @change="handleAI"
        /> -->
        <el-select v-model="formInline.alarmTypeCode" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.dict_id"
            :label="item.kindName"
            :value="item.kind"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div class="table-style">
      <div class="btn-style">
        <div class="left">
          <!-- <el-button-group style="margin-right: 8px">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
            >
              查询
            </el-button>
            <el-dropdown type="primary">
              <el-button type="primary">
                <img
                  style="vertical-align: bottom"
                  src="@/assets/video/sx.png"
                />
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>11</el-dropdown-item>
                <el-dropdown-item>22</el-dropdown-item>
                <el-dropdown-item divided>33</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-button-group> -->
          <!-- <el-button icon="el-icon-refresh">重置</el-button>
          <el-button icon="el-icon-download">导出</el-button> -->
        </div>
        <div class="right" v-if="false">
          <el-radio-group v-model="tabPosition" @change="handleTabPosition">
            <el-radio-button :label="1">列表</el-radio-button>
            <el-radio-button :label="2">图像</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <template v-if="tabPosition === 1">
        <TableView @changeStatus="changeStatus" :tableData="tableData" />
      </template>
      <template v-else
        ><ListView
          :tableData="tableData"
          :freezeData="deepCloneData"
          @openImg="handleImg"
      /></template>
      <div class="fanYe">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-sizes="[10, 15, 20, 50, 100]"
          :page-size="formInline.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import ListView from "./ListView.vue";
import TableView from "./TableView.vue";
// import {
//   getPictureAIAnalysis,
//   getCameraList,
//   getkindList,
//   changeRowsStatus,
// } from "@/api/video/intelligentAnalysisApi.js";
export default {
  name: "",
  components: {
    AllSelect: () => import("@/components/AllSelect/index.vue"),
    ListView,
    TableView,
  },
  data() {
    return {
      // 搜索表单
      formInline: {
        cameraId: "",
        alarmTypeCode: "",
        time: "",
        pageSize: 10,
        pageNum: 1,
      },
      tabPosition: 1,
      // 摄像头
      cameraList: [],
      selectOptionsCamera: {
        value: "id",
        label: "name",
      },
      // ai事件
      kindList: [],
      selectOptionsKind: {
        value: "kind",
        label: "kindName",
      },
      // table列表
      tableData: [],
      deepCloneData: [], //此乃原始table的picture相对路径地址
      total: 0,
      // 图像列表
      listData: [],
    };
  },
  computed: {
    // 当天日期
    currentDay: {
      get() {
        const firstDay = new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate()
        );
        // 使用padStart方法来确保月份和日期都是两位数
        const year = firstDay.getFullYear();
        const month = (firstDay.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，所以要+1
        const day = firstDay.getDate().toString().padStart(2, "0");
        return `${year}-${month}-${day}`;
      },
    },
    // 当月一号
    currentMonth: {
      get() {
        const firstDay = new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          1
        );
        // 使用padStart方法来确保月份和日期都是两位数
        const year = firstDay.getFullYear();
        const month = (firstDay.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，所以要+1
        const day = firstDay.getDate().toString().padStart(2, "0");
        return `${year}-${month}-${day}`;
      },
    },
    // 当天开始算向前推一个月（30天）
    firstMonth: {
      get() {
        let now = new Date(); // 假设现在是 此时此刻的当天
        let targetDate = new Date(now);
        targetDate.setDate(now.getDate() - 30); // 往回推30天
        // 格式化日期
        let formattedStartDate = `${targetDate.getFullYear()}-${(
          "0" +
          (targetDate.getMonth() + 1)
        ).slice(-2)}-${("0" + targetDate.getDate()).slice(-2)}`;
        return formattedStartDate;
      },
    },
  },
  created() {
    // this.getPictureAIAnalysis();
    this.getCameraList();
    this.getkindList();
  },
  mounted() {
    // this.formInline.time = [this.firstMonth, this.currentDay];
    // this.formInline.time = [];
    this.$refs.videoTree?.initTree(true);
    this.handleSearch();
  },
  methods: {
    // 来一个默认选择事件
    defaultTime() {},
    // 列表
    async getPictureAIAnalysis(query) {
      if (!query) {
        query = {
          page: 1,
          limit: 10,
        };
      }
      // 选择时间的话
      if (query?.time) {
        query.startTime = query.time[0];
        query.endTime = query.time[1];
      } else {
        query.startTime = null;
        query.endTime = null;
      }
      let resa = { ...query };
      delete resa.time;
      // delete query.time;
      // const { code, rows, total, msg } = await getPictureAIAnalysis(resa);
      // if (code === 200) {
      //   this.tableData = rows;
      //   this.deepCloneData = JSON.parse(JSON.stringify(rows));
      //   this.total = total;
      // } else {
      //   this.$message({
      //     message: msg,
      //     type: "error",
      //   });
      // }
    },
    // 摄像头列表
    async getCameraList() {
      // const { state, data, message } = await getCameraList();
      // if (state === 1) {
      //   this.cameraList = data;
      // } else {
      //   this.$message({
      //     message: message,
      //     type: "error",
      //   });
      // }
    },
    // ai事件列表
    async getkindList() {
      // const { state, data, message } = await getkindList();
      // if (state === 1) {
      //   this.options = data;
      // } else {
      //   this.$message({
      //     message: message,
      //     type: "error",
      //   });
      // }
    },
    // 搜索摄像头
    onSubmit(e) {
      // console.log(e, "这是选中的数据");
      this.queryCamera = e.join();
    },
    // 时间搜索
    handleTime(e) {
      console.log(e, this.formInline, "选择时间范围");
    },
    // 搜索ai分析
    handleAI(e) {
      console.log(e, "这是选中的数据");
      this.formInline.alarmTypeCode = e.join();
    },
    // 按条件检索
    handleSearch() {
      this.formInline.pageSize = 10;

      let query = JSON.parse(JSON.stringify(this.formInline));

      console.log(query, "submit!");
      this.getPictureAIAnalysis(query);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.limit = val;
      delete this.formInline.time;
      this.getPictureAIAnalysis(this.formInline);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pageNum = val;
      delete this.formInline.time;
      this.getPictureAIAnalysis(this.formInline);
    },
    handleTabPosition() {
      //需要携带数据可以加上这两行
      this.formInline.page = 1;
      this.getPictureAIAnalysis(this.formInline);
    },
    // 点击图片
    handleImg() {
      // this.dialogVisibleCopyImage = true;
    },

    changeStatus(id, status) {
      console.log("行间事件 的改变", id, status);
      if (status == 1) {
        this.$modal.loading("正在发布，请稍候...");
      } else {
        this.$modal.loading("正在禁止发布，请稍候...");
      }

      // const { id, status } = e;
      let query = {
        alarmStatus: status,
        alarmId: id,
      };
      // changeRowsStatus(query).then((res) => {
      //   console.log(res);
      //   if (res.code == 200) {
      //     this.handleSearch();
      //     this.$modal.closeLoading();
      //     this.$modal.msgSuccess("操作成功");
      //   }
      // });
    },
  },
};
</script>

<style scoped lang="scss">
.intelligent-analysis-container {
  padding: 12px;
  margin: 12px;
  background-color: #ffffff;
  height: 97%;
  .demo-form-inline {
    ::v-deep .el-form-item {
      margin-right: 18px;
      margin-bottom: 0;
    }
    ::v-deep .el-form-item__label {
      font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 16px;
      color: #606163;
    }
  }
  .table-style {
    border-top: 1px solid #e5e5e5; /* 修改水平线颜色为灰色 */
    margin-top: 12px;
    padding-top: 12px;
    .btn-style {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left,
      .right {
        display: flex;
        align-items: center;
      }
    }
    .fanYe {
      width: 100%;
      padding: 10px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
